<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { nameEnum } from './type'

const props = defineProps(['state', 'formruleno', 'submitloading'])
const emits = defineEmits(['close', 'submit'])
const { formruleno, state, submitloading } = toRefs(props)
const columns: PlusColumn[] = [
    {
        hasLabel: false,
        label: '状态',
        prop: 'ruleInfo',
    },
]
const labelEnum = {
    1: '积分有效期',
    2: '抵扣规则',
    3: '获取上限',
    4: '积分保护期',
    5: '完成下单奖励',
    6: '购买商品奖励',
} as const
</script>

<template>
    <PlusForm v-model="state"
              :columns="columns"
    >
        <template #plus-field-ruleInfo>
            <template v-if="nameEnum[formruleno].label === labelEnum[1]">
                <el-radio-group v-model="state.ruleInfo"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                >
                    <el-radio value="1"
                              size="large"
                    >
                        永久有效
                    </el-radio>

                    <el-radio value="2"
                              size="large"
                    >
                        自获得积分起,
                        <el-input-number v-model="state.num1"
                                         :min="1"
                                         :max="4"
                                         :disabled="state.ruleInfo === '1'"
                        />
                        年底清零
                        <div class="text-#ccc">
                            例如当年获得积分,则统一在(T+N)年12月31日失效
                        </div>
                    </el-radio>
                </el-radio-group>
            </template>

            <template v-if="nameEnum[formruleno].label === labelEnum[2]">
                <el-radio-group v-model="state.ruleInfo"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                >
                    <el-radio value="1"
                              size="large"
                    >
                        不可抵现
                    </el-radio>

                    <el-radio value="2"
                              size="large"
                    >
                        每 <el-input-number v-model="state.num1"
                                           :min="0"
                                           :disabled="state.ruleInfo === '1'"
                        />

                        个积分可抵现1元 <br>

                        每笔订单最多使用积分折现 <el-input-number v-model="state.num2"
                                                      :min="0"
                                                      :max="100"
                                                      :disabled="state.ruleInfo === '1'"
                        />%
                    </el-radio>
                </el-radio-group>
            </template>

            <template v-if="nameEnum[formruleno].label === labelEnum[3]">
                <el-radio-group v-model="state.ruleInfo"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                >
                    <el-radio value="1"
                              size="large"
                    >
                        无上限
                    </el-radio>

                    <el-radio value="2"
                              size="large"
                    >
                        每个客户每天最多获得 <el-input-number v-model="state.num1"
                                                    :min="0"
                                                    :disabled="state.ruleInfo === '1'"
                        />
                        积分
                        <div class="text-#ccc">
                            仅对完成下单和购买商品赠送的积分有效
                        </div>
                    </el-radio>
                </el-radio-group>
            </template>

            <template v-if="nameEnum[formruleno].label === labelEnum[4]">
                <el-radio-group v-model="state.ruleInfo"
                                class="flex flex-col gap-15"
                                style="align-items: start;"
                >
                    <el-radio value="1"
                              size="large"
                    >
                        无保护期
                    </el-radio>

                    <el-radio value="2"
                              size="large"
                    >
                        积分发放后将进入 <el-input-number v-model="state.num1"
                                                  :min="1"
                                                  :disabled="state.ruleInfo === '1'"
                        />
                        天保护期,无法使用
                        <div class="text-#ccc">
                            仅对完成下单和购买商品赠送的积分有效
                        </div>
                    </el-radio>
                </el-radio-group>
            </template>

            <template v-if="nameEnum[formruleno].label === labelEnum[5]">
                每成功下单1笔,获得 <el-input-number v-model="state.num1"
                                            :min="0"
                />积分
            </template>

            <template v-if="nameEnum[formruleno].label === labelEnum[6]">
                <div>
                    单笔订单每满<el-input-number v-model="state.num1"
                                           :min="0"
                    />
                    元
                </div>

                <br>

                <div>
                    获得<el-input-number v-model="state.num2"
                                       :min="0"
                    />积分
                </div>
            </template>
        </template>

        <template #footer>
            <div class="ml-auto">
                <el-button @click="emits('close')">
                    关闭
                </el-button>

                <el-button type="primary"
                           :loading="submitloading"
                           @click="emits('submit')"
                >
                    提交
                </el-button>
            </div>
        </template>
    </PlusForm>
</template>

<style scoped>
.el-input-number {
    margin: 0 10px;
}
</style>
